import React, { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { Button, Popconfirm, App, Switch } from 'antd'
import { useModel } from '@umijs/max'
import { PlusOutlined } from '@ant-design/icons'
import './SubMerchant.less'
import { render } from 'react-dom'

export default () => {
  const { GetSubShopList, UpdateStatus, SetDisplay } = useModel('SubMerchant')

  const { message, modal } = App.useApp()

  const tableRef = useRef()
  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const [pageSize, setPageSize] = useState(10) //  每页数量

  // 新增/编辑增值服务
  const handleAddAndEdit = async (type, row) => {
    let url = `/subMerchantDetails?type=${type}`
    if (type === 'edit' && row?.id) {
      url += `&id=${row.id}`
    }
    window.open(url)
  }

  // 禁用/启用
  const handleChangeStatus = async row => {
    // 禁用传 2 启用传 1
    let params = {
      id: row.id,
      status: row.status === 1 ? 2 : 1
    }
    const res = await UpdateStatus(params)
    if (res) {
      message.success('操作成功')
      tableRef.current.reload()
    }
  }

  // 店铺显示/隐藏
  const handleChangeDisplay = async row => {
    let params = {
      id: row.id
    }
    const res = await SetDisplay(params)
    if (res) {
      message.success('操作成功')
      tableRef.current.reload()
    }
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '店铺名称',
      dataIndex: 'shop_name',
      width: 100,
      align: 'center'
    },
    {
      title: '账号',
      dataIndex: 'contact_tel',
      width: 100,
      align: 'center'
    },
    {
      title: '申请时间',
      dataIndex: 'updated_at',
      width: 100,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '联系人',
      dataIndex: 'store_contact',
      width: 100,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '联系电话',
      dataIndex: 'contact_tel',
      width: 100,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '企业地址',
      width: 100,
      align: 'center',
      hideInSearch: true,
      render: (_, row) => {
        return (
          <div>
            {row.company_province}-{row.company_city}-{row.company_area}
          </div>
        )
      }
    },
    {
      title: '联系地址',
      dataIndex: 'company_detail_address',
      width: 100,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '店铺状态',
      dataIndex: 'is_display',
      width: 100,
      render: (_, row) => {
        return (
          <Switch
            onChange={() => handleChangeDisplay(row)}
            checkedChildren='显示'
            unCheckedChildren='隐藏'
            checked={row.is_display === 1}
          />
        )
      }
    },
    {
      title: '操作',
      key: 'option',
      width: 150,
      valueType: 'option',
      fixed: 'right',
      render: (_, row, index, action) => {
        let { status } = row
        return (
          <>
            <Popconfirm
              key='status'
              title='确定更改状态吗?'
              onConfirm={() => handleChangeStatus(row)}
              okText='确认'
              cancelText='取消'
            >
              <Button type='link' danger={status === 1}>
                {status === 1 ? '禁用' : '启用'}
              </Button>
            </Popconfirm>
            <Button type='link' key='edit' onClick={() => handleAddAndEdit('edit', row)}>
              查看详情
            </Button>
          </>
        )
      }
    }
  ]

  return (
    <ProTable
      actionRef={tableRef}
      request={async params => {
        const filters = {
          shop_name: params.shop_name,
          contact_tel: params.contact_tel
        }

        const param = {
          page: params.current,
          page_size: params.pageSize,
          ...filters
        }

        setCurrentPage(params.current)
        setPageSize(params.pageSize)

        const res = await GetSubShopList(param)

        return {
          data: res.data,
          success: true,
          total: res.total
        }
      }}
      pagination={{
        pageSize: pageSize,
        current: currentPage
      }}
      rowKey='id'
      scroll={{ x: 'max-content' }}
      columns={columns}
      headerTitle={
        <Button
          icon={<PlusOutlined />}
          key={Math.random().toString()}
          type='primary'
          onClick={() => handleAddAndEdit('add')}
        >
          新增商户
        </Button>
      }
      search={{
        defaultCollapsed: false,
        labelWidth: 'auto',
        span: 6
      }}
    />
  )
}
